<template>
  
    <orh-trees>
        <Tree slot="trees" :data="trees" :load-data="loadData" @on-select-change="getNodes"></Tree>
        <orh-sub-table pages :pageDate="pageDate" slot="content" ref="htmlHeight">
            <div slot="table">
                <Row>
                    <Col span="4">  
                        <Button type="primary" @click="modal1other=true" size="small">筛选条件</Button>
                    </Col>
                    <Col span="4">  
                        <Button type="primary" @click="printingClick" size="small">打印</Button>
                    </Col>
                    <Col span="4">
                        <a id="hrefToExportTable" >
                            <Button type="primary" @click="modal1=true" size="small" style="margin-left:15px">按时间段导出 </Button>
                        </a>
                    </Col>
                    <Col span="4">
                        <Select v-model="condition.workstatus" size="small" @on-change="searchfun1">
                            <Option v-for="(item,index) in workstatuslist" :value="item.value" :key="index">
                            {{item.lable}}
                            </Option>
                        </Select>
                    </Col>
                </Row>
                <br/>
                <list :printing="printing" @print-end="printEnd" :datalist="datalist" :columnstype="columnstype" :typeall="typeall" :tableload="tableload" :tableHeight="tableHeight" @on-look-fun="Detail"></list>
            </div>
        </orh-sub-table>  
        
        <Modal
            v-model="modal1"
            title="请选择时间"
            slot="others">
            <p> 
                <div style="width:100%;text-align: center;margin-bottom:5px">
                    <DatePicker type="date" size="small" placeholder="开始日期" @on-change="timechangestar"></DatePicker>
                    <DatePicker type="date" size="small" placeholder="结束日期" @on-change="timechangeend"></DatePicker>
                </div>
                <a href="" class="prompt">已确保您的浏览器已信任本网页</a>
                <div slot="footer">
                    <Button @click="modal1=false">取消</Button>
                    <Button type="primary" :loading="tableload==true ? true : butloading"  @click="exportExceltime">导出</Button>
                </div>
            </p>
        </Modal> 
        <Modal
            v-model="modal1other"
            title="筛选条件"
            slot="others">
            <p> 
            <condition @on-condition="onCondition" @modal1="modal1=>modal1other=modal1"></condition>
            <div slot="footer">
                <Button @click="modal1other=false" long>取消</Button>
            </div>
            </p>
        </Modal>
        <orh-sidebar v-model="isShow" :title="`${titles}`" cover slot="others">
            <detail v-if="isShow" :conditiones="conditiones"></detail>
        </orh-sidebar>
    </orh-trees>
</template>

<script>   
  export default {
    name: "teacher-groupattendancedatastatistics",
    components: {
		Detail: resolve => {require(['../Public/AttendanceList/Detail.vue'], resolve);},
		List: resolve => {require(['../Public/AttendanceList/List.vue'], resolve);},
		Condition: resolve => {require(['../Public/AttendanceList/Condition.vue'], resolve);},
    },
    data () {
      return {
            workstatuslist:[
                {
                    value:65,
                    lable:'在职'
                },
                {
                    value:66,
                    lable:'退休'
                },
                {
                    value:67,
                    lable:'自由职业'
                }
            ],
            sss:new Date(),
            // 列表接口请求携带参数
            condition:{
                department_id:null,
                month:null,
                semester_id:null,
                workstatus:65,
            },
            conditiones:null,
            isShow:false,
            tableload:false,
            butloading:false,
            modal1:false,
            tableHeight:0,

            an_time:'',
            en_time:'',
            titles:'',
            // 部门数据
            trees: [],
           
            datalist:[],//荣誉变量
              
            listUrl:'api/teacher/v1/get/teacher/user/listss',//

            columnstype:false,
            typeall:false,
            modal1other:false,
            confintype:'month',
            yearmodel:null,
            semesterList:[],

            printing:false,
            pageDate: {
                total:0,
                current_page: 1,
                per_page: 1
            },
        }
    },
    methods: {
        // =====导出  开始======
            exportExcel () {
               if(!this.condition.department_id){
                    this.$Message.warning('请选择部门');
                    return
                } else if(!this.condition.month){
                    this.$Message.warning('请选择时间');
                    return
                }else{
                    this.butloading=true
                    let name = '教职工考勤数据'
                    let aId = 'hrefToExportTable'
                    this.$util.DownloadExcel(this.$refs.tableExcel, aId, name);
                    this.butloading=false
                }

            },
            timechangestar(val){ 
                this.an_time = `${val}` 
            },
            timechangeend(val){
                let years = val.substring(0,4)
                let mon = val.substring(val.length-2,val.length)
                let end = new Date(years,mon,0).toJSON().substring(0,10)
                this.en_time = end
            },
            exportExceltime () {
               if(!this.condition.department_id){
                    this.$Message.warning('请选择部门');
                    return
                } else if(this.an_time=='' || this.en_time==''){
                    this.$Message.warning('请选择时间');
                    return
                
                }else if(this.en_time.substring(0,7) < this.an_time.substring(0,7)){
                    this.$Message.warning('请选择正确的时间区域');
                    return
                }else{
                    this.butloading=true
                    this.$http.get(`api/teacher/v1/Entrance/exportExceltontdey?department_id=${this.condition.department_id}&an_time=${this.an_time}&en_time=${this.en_time}`)
                    .then(val => {
                        this.butloading=false
                        window.open(val.data.url)
                    })
                    .catch(err => {
                        if(err.code && err.code==422) {
                            this.$Message.error(err.message);
                        }  
                        this.butloading=false   
                    });
                }

            },
            
        // =====导出  结束======
        


        /************************************************************
         * 
         * 加载一级部门
         * 
         ************************************************************/
        load(){
            this.$http.get('api/user/v1/get/department/list').then(val=>{
                this.trees = this.process(val.data)
            }) 
            .catch(err => {
                console.log(err);
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }     
            });

        },

        /************************************************************
         * 
         * 处理数据
         * 
         ************************************************************/
        process(data) {
            let arr = []
            data.forEach(item => {
                item.title = item.label = item.department_name.zh?item.department_name.zh:item.department_name.mn;
                item.value = item.id
                if(item.childs) {
                    item.loading = false
                    item.children = []
                }
                arr.push(item)
            })
            return arr
        },

        /************************************************************
         * 
         * 异步加载子部门
         * 
         ************************************************************/
        loadData(item, callback){
            this.$http.get(`api/user/v1/department/info?pid=${item.id}`).then(val=>{
                callback(this.process(val.data))

            }) 
            .catch(err => {
                console.log(err);
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }     
            });

        },

        /************************************************************
         * 
         * 点击部门请求数据
         * 
         ************************************************************/
        getNodes(item) {
            this.condition.department_id=item[0].id
            this.urlType()
        }, 

        /************************************************************
         * 
         * 获取教师数据
         * 
         ************************************************************/
        queryData(){
            if(!this.condition.department_id){
                this.$Message.warning('请选择部门');
                return
            }
            if(this.confintype=='month' && !this.condition.month){
                this.searchfun(new Date().toISOString().substr(0, 7)) 
            }
            this.tableload=true
            this.$http.get(this.listUrl).then(val=>{
                this.datalist=val.data
                this.pageDate.total=this.datalist.length
                this.pageDate.per_page=this.datalist.length
                this.tableload=false//加载完数据动画结束  
                let a = this.$refs.htmlHeight.$el.offsetHeight
                this.tableHeight = this.datalist.length==0 ? 0 : (a - 90)
            }) .catch(err=>{
                console.log(err);
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.tableload = false;
            })

        },
       

        /************************************************************
         * 
         * 日期搜索
         * 
         ************************************************************/
        searchfun(val){
            this.condition.month=val
            this.columnstype = false
            this.typeall = false
            this.listUrl=`api/teacher/v1/get/teacher/user/listss?department_id=${this.condition.department_id}&type=month&month=${this.condition.month}`
            if(!this.condition.department_id){
                this.$Message.warning('请选择部门');
                return
            }
            this.queryData()
        },
        /************************************************************
         * 
         * 接口更换
         * 
         ************************************************************/
        urlType () {
            if(this.confintype=='month'){
                this.columnstype = false
                this.typeall = false
                this.listUrl=`api/teacher/v1/get/teacher/user/listss?department_id=${this.condition.department_id}&type=month&month=${this.condition.month}&workstatus=${this.condition.workstatus}`
            }
            if(this.confintype=='semester'){
                this.columnstype = 'semester'
                this.typeall = 'semester'
                this.listUrl=`api/teacher/v1/get/teacher/user/listss?department_id=${this.condition.department_id}&type=semester&semester_id=${this.condition.semester_id}&workstatus=${this.condition.workstatus}`
            }
            this.queryData()
        },

        /************************************************************
         * 
         * 在职状态搜索
         * 
         ************************************************************/
        searchfun1(val){
            this.condition.workstatus=val
            if(!this.condition.department_id){
                this.$Message.warning('请选择部门');
                return
            }
            this.urlType()
        },
        
        Detail(row){
            this.conditiones={
                user_id:row.user_id,
                month:this.condition.month
            }
            this.titles=row.titles
            this.isShow=row.isShow
        },
        onCondition(type,data){
            this.modal1other=false
            this.confintype=type
            this.condition.semester_id=data.semester_id
            this.condition.month=data.month
            if(!this.condition.department_id){
                this.$Message.warning('请选择部门');
                return
            }
            this.urlType()
        },
        /************************************************************
         * 
         * 打印数据
         * 
         ************************************************************/
        printingClick () {
            this.printing=true
        },

        /************************************************************
         * 
         * 打印数据结束后
         * 
         ************************************************************/
        printEnd(data){
            this.printing=data
        }
    },
    mounted(){
        this.load()  
    }
  }
</script>